<template>
	<view class="top" ref="top" :style="{
		height: navHeight + 20+'rpx',
	}">
	</view>
	<view class="menuButtonheight" :style="{height: menuButtonheight + 'rpx',
		'top': navHeight + 'rpx',
	}">
		<view class="headerCenter">
			<view class="tag" @click="backPage">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/leftTag.png"></image>
			</view>
			<view class="titleText">编辑需求</view>
		</view>

	</view>
	<view class="topHeader" :style="{
		'top': navHeight+ menuButtonheight+'rpx',
	}">

		<view class="ucenterHeader">
			<view class="topHeaderSub">
				<view class="statusText" :class='type==item.id?"active":""' @tap="typeClick(item.id)"
					v-for="(item,index) in herder" :key="index">{{item.name}}</view>
			</view>
		</view>

		<view class="mainInfo">
			<view class="flex_row_start_center mainSub" v-if="subHeader.length>0">
				<view class="statusText" v-for="(item1,index1) in subHeader" :key="index1"
					:class='form.cat_id==item1.id?"active":""' @tap="typeClick1(item1.id)">
					{{item1.name}}
				</view>
			</view>
			<view class=" menuRow">
				<view class="tagMenu" v-if="type!='2'">
					<text style="width: 150rpx;">测量方式</text>
					<view class="flex_row_start_center wight" @tap="changeSelect">
						<view class="info" v-show="form.visit!=''">
							{{form.visit=='0'?'无需上门':form.visit=='1'?'立即上门':form.visit=='2'?'预约上门':' '}}
						</view>
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
					</view>
				</view>
				<view class="tagMenu" v-if="form.visit!='0'&&type!='2'">
					<text style="width: 150rpx;">服务时间</text>
					<view class="flex_row_start_center wight" @tap="changeSelectTime">
						<view v-show="form.service_time!=''" class="info">{{form.service_time}}</view>
						<view v-if="form.service_time==''&&form.visit=='2'" class="infos">请选择预约上门时间</view>
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
							v-show="form.visit!='1'" />
					</view>
				</view>
				<view class="tagMenu">
					<text style="width: 150rpx;">所在地区</text>
					<view class="flex_row_start_center wight" @tap="changeSelectMap">
						<view v-show="locationName!=''" class="info">{{locationName}}</view>
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
					</view>
				</view>
			</view>
			<view class="tagMenuDesign" :class="showDesign?'tagMenuDesigns':''" v-if="type!='2'&&locationName!=''">
				<view class="designBox">
					<text style="width: 150rpx;">设计服务</text>
					<view class="flex_row_start_center wight" @click="showDesignOrCrop" v-if="DesignNum!==0">

						<view v-show="locationName!=''&&!showDesign" class="info">{{DesignNum}}位服务者可供选择</view>
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
					</view>
					<view class="flex_row_start_center wight" @click="showDesignOrCrop" v-else>
						<view v-show="locationName!=''&&!showDesign" class="info">{{locationInfo.design_num}}位服务者可供选择
						</view>
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
					</view>
				</view>
				<view class="box" v-if="showDesign">
					<DesignOrCorpItem v-if="showDesign" :item='designCorp' :text='"select"'
						:type='designCorp.selectType' @closeItem='closeItem'></DesignOrCorpItem>
				</view>
			</view>

			<view class="note" style="margin-top: 20rpx;">
				<text style="width: 150rpx;">备注</text>
				<view class="textareaStyle">
					<up-textarea v-model="form.desc" maxlength="140" :height="150" placeholder="用一句话描述你的需求，如设计风格、装修预算等"
						count :formatter="formatter" ref="textareaRef" placeholderStyle="font-size:24rpx"></up-textarea>

				</view>

			</view>
			<view class="send" @tap="addDammer">
				保存
			</view>
		</view>
		<up-picker :show="showType" :columns="columns" :confirmColor="'#D0A564'" keyName="label" @confirm="handleSelect"
			@cancel="handleCancelSelect"></up-picker>
		<up-datetime-picker :show="showTime" v-model="timevalue" @cancel="handleTime" :confirmColor="'#D0A564'"
			@confirm="handleSaveTime" mode="datetime"></up-datetime-picker>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import {
		demand_add,
		mapGetInfo,
		requireType,
	} from '@/api/require.js'

	import {
		details,
		demand_edit,
		get_area_design_num
	} from '@/api/require.js';


	import DesignOrCorpItem from '@/components/designOrCorpItem.vue'
	// 头部的高度
	const headHeight = ref('')
	// 导航栏的右边距
	const navPaddingRight = ref('')
	// 导航栏的高度
	const navHeight = ref('')
	//胶囊高度: "value", 
	const menuButtonheight = ref('')

	// 导航栏距离顶部的距离
	const navTop = ref('')

	const show = ref(false);
	const textareaRef = ref(null);

	const detailsData = ref({})

	const checkId = ref('') //选中的id


	const form = ref({
		id: '',
		cat_id: '', //需求类型:1=家装设计,2=公装设计,3=家装施工,4=公装施工,5=家具购买,6=家具定制  
		desc: '', //需求描述  
		province: '', //省code  
		city: '', //市 
		county: '', //区code  
		address: '', //详细地址  
		service_time: '', //服务时间,type=1,2装修设计才有  
		corp_id: '', //企业id
		design_id: '', //设计师id,type=1,2装修设计才有,非必填  
		location: '',
		visit: ''
	})

	onLoad((option) => {
		console.log(' option.id option.id option.id', option.id)
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		if (option.id) {
			for (let key in form.value) {
				form.value[key] = ''
			}
			form.value.id = option.id;
			checkId.value = option.id
		}
	})
	onShow(() => {
		location.value = uni.getStorageSync('location') || ''
		if (location.value != '') {
			getLocalInfo()
			showDesign.value = false
		}
		type.value = uni.getStorageSync('reqiureType') || 1
		designCorp.value = uni.getStorageSync('designCorp')
		if (designCorp.value != '') {
			showDesign.value = true
		}


		if (designCorp.value?.user?.design_id != 0) {
			checkId.value = designCorp.value?.user?.design_id
		}
		if (designCorp.value?.user?.corp_id !== 0) {
			checkId.value = designCorp.value?.id
		}

		// console.log('设计师信息 企业id', checkId.value, designCorp.value)
	})

	onMounted(() => {
		getType(0)
		// 获取胶囊的位置
		const menuButtonObject = uni.getMenuButtonBoundingClientRect();
		const systemInfo = uni.getSystemInfoSync();
		// 获取系统信息
		uni.getSystemInfo({
			success: (res) => {
				// 获取状态栏的高度
				const statusBarHeight = res.statusBarHeight;
				navTop.value = menuButtonObject.top
				navHeight.value = (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
					menuButtonObject.height + systemInfo.statusBarHeight;
				menuButtonheight.value = menuButtonObject.height * 2;
				navPaddingRight.value = (menuButtonObject.width + 6) * 2;
				headHeight.value = (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
					menuButtonObject.height + systemInfo.statusBarHeight;

			},
		});
		if (textareaRef.value) {
			textareaRef.value.setFormatter(formatter);
		}
		if (form.value.id) {
			queryDemandDetails()
		}

	})
	// 编辑需求的详情
	const queryDemandDetails = async () => {
		const res = await details({
			id: form.value.id
		});
		if (res.code === 1) {
			detailsData.value = res.data.demand
			form.value = res.data.demand
			if (res.data.demand.cat.length !== 0) {
				type.value = res.data.demand.cat[0].id
				form.value.cat_id = res.data.demand.cat[1].id
				// if (res.data.demand.cat[1].pid) {
				getType(type.value)
				// }
			}

			if (res.data.demand.visit == 0) {
				form.value.visit = '0'
			} else if (res.data.demand.visit == 1) {
				form.value.visit = '1'
			} else {
				form.value.visit = '2'
			}
			getDesignNum() //获取设计师数量

			locationName.value = detailsData.value.province_name + detailsData.value.city_name + detailsData.value
				.county_name + detailsData.value.address

			// 没有设计师 和企业
			if (res.data.demand.design_id == 0 && res.data.demand.corp_id == 0) {
				showDesign.value = false //显示 有多少人

			} else {
				// 有设计师就显示设计师的信息
				if (res.data.demand.design) {
					showDesign.value = true
					designCorp.value = res.data.demand.design
					if (res.data.demand.design_id > 0) {
						designCorp.value.selectType = '1'
					}
				} else if (res.data.demand.corp) {
					// 有企业系就显示企业的信息
					showDesign.value = true
					designCorp.value = res.data.demand.corp
					if (res.data.demand.corp_id > 0) {
						designCorp.value.selectType = '2'
					}

				} else {
					showDesign.value = false
				}

				// 企业信息
				if (res.data.demand.corp_id > 0) {
					designCorp.value.selectType = '2'
				}
				if (designCorp.value != '' && designCorp.value.selectType == '1') {
					form.value.design_id = res.data.demand.design_id
					checkId.value = res.data.demand.design_id
				}
				if (designCorp.value != '' && designCorp.value.selectType == '2') {
					form.value.corp_id = res.data.demand.corp_id
					checkId.value = res.data.demand.corp_id
				}

			}
			uni.setStorageSync('designCorp', designCorp.value)
			location.value = res.data.demand.location
		}

	}
	// 返回上一页
	const backPage = () => {
		uni.navigateBack()
	}

	const changeSelectMap = () => {
		uni.navigateTo({
			url: '/pages/requireB/map/index?isDesign=1'
		})
	}



	const DesignNum = ref(0) //设计师数量

	//类型的切换
	const type = ref(uni.getStorageSync('reqiureType') || 1)

	// 顶部分类切换
	const typeClick = (code) => {

		uni.setStorageSync('location', '')
		uni.setStorageSync('locationName', '')
		location.value = ''
		locationName.value = ''
		locationInfo.value = ''
		designCorp.value = ''
		form.value.desc = ''
		form.value.service_time = ''

		form.value.desc = ''
		form.value.service_time = ''
		locationInfo.design_num = 0
		DesignNum.value == 0
		form.value.cat_id = ''
		form.value.visit = 0

		uni.setStorageSync('designCorp', '')


		console.log('点击的类型', code)
		type.value = code
		uni.setStorageSync('reqiureType', code)
		getType(code)
		if (code == 1 && DesignNum.value == 0 || code == 3 && DesignNum.value == 0) {
			getDesignNum() //获取设计师数量
		}

	}

	// 获取设计师数量
	const getDesignNum = async () => {

		let params = {
			city_code: detailsData.value.city, //城市
			province_code: detailsData.value.province, //省份
			demand_id: form.value.id //需求id
		}
		const res = await get_area_design_num(params)
		if (res.code == 1) {
			DesignNum.value = res.data.design_num
			console.log('--设计师数量-', DesignNum.value)
		}
	}



	//二级类型选择
	const typeClick1 = (code) => {
		form.value.cat_id = code
	}
	//发布需求
	const addDammer = async () => {
		if (form.value.cat_id == '') {
			uni.$u.toast('请选择分类');
			return
		}
		if (type.value != '2' && form.value.visit == '') {
			uni.$u.toast('请选择测量方式');
			return
		}
		if (locationName == '') {
			uni.$u.toast('请选择地址');
			return
		}
		if (designCorp.value != '' && designCorp.value.selectType == '1') {
			form.value.design_id = designCorp.value.id
			form.value.corp_id = ''
		} else if (designCorp.value != '' && designCorp.value.selectType == '2') {
			form.value.corp_id = designCorp.value.id
			form.value.design_id = ''
		}
		console.log(form.value)
		const res = await demand_edit(form.value)
		//发布成功之后清空
		console.log(res)
		if (res.code == 1) {
			uni.redirectTo({
				url: '/pages/demand/demandStatus/index'
			})
			for (let key in form.value) {
				form.value[key] = ''
			}

			form.value.service_time = getDateTime()
			form.value.visit = '1'
			form.value.cat_id = ''

			uni.setStorageSync('location', '')
			uni.setStorageSync('locationName', '')
			uni.setStorageSync('designCorp', '')
			location.value = ''
			locationName.value = ''
			locationInfo.value = ''
			designCorp.value = ''

		} else {
			uni.$u.toast(res.msg);
		}
	}

	// 格式化方法  
	const formatter = (val) => {
		// 让输入框过滤空格  
		return val.replace(/\s+|\s+$/g, '')
	};
	const dateArray = ref([]);

	//获取经纬度信息
	const location = ref('')
	const locationName = ref('')
	const designCorp = ref('')
	const showDesign = ref(false)

	const herder = ref([])
	const subHeader = ref([])
	const getType = async (code) => {
		const res = await requireType({
			pid: code
		})
		if (code == 0) {
			herder.value = res.data.list
			type.value = res.data.list[0].id
			getType(type.value)
		} else {
			subHeader.value = res.data.list
		}
	}
	//获得地址相关信息
	const locationInfo = ref('')
	const getLocalInfo = async () => {
		let obj

		if (type.value == '1' || type.value == '3') {
			obj = {
				demand_id: form.value.id,
				location: location.value,
				get_design_num: '1'
			}
		} else {
			obj = {
				demand_id: form.value.id,
				location: location.value,
				get_design_num: '0'
			}
		}
		const res = await mapGetInfo(obj)
		if (res.code == 1) {
			locationInfo.value = res.data.res
			form.value.province = res.data.res.province
			form.value.city = res.data.res.city
			form.value.county = res.data.res.county
			form.value.address = res.data.res.address
			form.value.location = location.value
			locationName.value = res.data.res.province_name + res.data.res.city_name + res.data.res
				.county_name +
				res.data.res.address
		} else {
			locationInfo.value = ''
			form.value.province = ''
			form.value.city = ''
			form.value.county = ''
			form.value.address = ''
			form.value.location = ''
		}
	}
	// 删除设计师
	const closeItem = () => {
		console.log('删除设计师')
		designCorp.value = ''
		showDesign.value = false
		uni.setStorageSync('designCorp', ' ')
		form.value.design_id = ''
		form.value.corp_id = ''

	}


	const changeSelectTime = () => {
		console.log('获取时间', form.value.visit)
		if (form.value.visit == '2') {
			showTime.value = true
		}
	}
	const handleTime = () => {
		showTime.value = false
	}
	const showTime = ref(false);
	const timevalue = ref(new Date())
	const handleSaveTime = async (e) => {
		console.log(e)
		const timeFormat = uni.$u.timeFormat;
		let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
		form.value.service_time = timeValue
		console.log(timeValue)
		showTime.value = false
	}
	const showDesignOrCrop = () => {

		designCorp.value = uni.getStorageSync('designCorp')
		console.log('---', checkId.value, designCorp.value)
		uni.navigateTo({
			url: '/pages/requireB/designOrCorp/index?city_code=' + form.value.city +
				'&province_code=' + form
				.value.province + '&id=' + form
				.value.id + '&type=' + type
				.value + '&design_id=' + checkId.value +
				'&selectType=' + designCorp.value.selectType
		})
	}

	const showType = ref(false);
	const columns = ref([
		[{
			label: '无需上门',
			id: '0'
		}, {
			label: '立即上门',
			id: '1'
		}, {
			label: '预约上门',
			id: '2'
		}, ]
	]);

	const changeSelect = () => {
		showType.value = true
	}
	const handleSelect = (v) => {
		form.value.visit = v.value[0].id
		showType.value = false
		if (form.value.visit == '1') {
			const now = new Date();
			form.value.service_time = getDateTime()
		} else if (form.value.visit == '0' || form.value.visit == '2') {
			form.value.service_time = ''
		}
	}
	const handleCancelSelect = (v) => {
		showType.value = false
	}

	const getDateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = (now.getMonth() + 1).toString().padStart(2, '0');
		const day = now.getDate().toString().padStart(2, '0');
		const hours = now.getHours().toString().padStart(2, '0');
		const minutes = now.getMinutes().toString().padStart(2, '0');

		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
</script>


<style lang="less" scoped>
	.top {
		width: 100%;
		background-color: #F5DED0;
		// background: rgba(254, 172, 94, 0.4);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
	}

	.menuButtonheight {
		width: 100%;
		position: absolute;
		font-weight: 500;
		font-size: 34rpx;
		text-align: center;
		color: #2F2F2F;
		background-color: #F5DED0;

		.headerCenter {
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
			height: 100%;

			.tag {
				width: 35rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 30rpx;
				top: 0;
				z-index: 1;

				image {
					width: 20rpx;
					height: 32rpx;
				}
			}

			.title {
				width: 100%;
				font-size: 24rpx;
				color: #2F2F2F;
				text-align: center;
			}
		}

	}


	.topHeader {
		width: 100%;
		min-height: 292rpx;
		position: absolute;
		z-index: 1;
		display: flex;
		align-content: flex-start;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background-image: url('https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/requireBj%402x.png');
		background-size: cover;
		background-position: center;
		background-color: transparent;

		.ucenterHeader {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			padding-top: 56rpx;
		}

		.topHeaderSub {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
			flex-direction: row;
			padding-left: 20px;
			height: 78rpx;
			margin-left: -50rpx;

			.statusText {
				width: 210rpx;
				height: 78rpx;
				font-family: PingFangSC;
				font-weight: normal;
				line-height: 76rpx;
				letter-spacing: 0px;
				color: #333333;
				cursor: pointer;
				font-weight: 500;
				font-size: 30rpx;
				text-align: center;
			}

			.active {
				text-align: center;
				background-image: url('https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/selectItem%402x.png');
				background-size: cover;
				background-position: center;
				background-color: transparent;
			}

			.active::after {
				content: '';
				display: block;
				width: 35rpx;
				height: 0rpx;
				border-bottom: 6rpx solid #D5A969;
				margin: 0 auto;
				/* 水平居中 */
			}
		}
	}

	.mainInfo {
		width: 100%;
		height: calc(100% - 200rpx);
		overflow-y: auto;
		border-top-right-radius: 30rpx;
		padding-top: -20rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
		padding-bottom: 50rpx;

		.mainSub {
			padding: 35rpx 30rpx 0;

			.statusText {
				width: 150rpx;
				height: 55rpx;
				background: #F4F4F4;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				margin-right: 22rpx;
				line-height: 55rpx;
				text-align: center;
			}

			.active {
				width: 150rpx;
				height: 55rpx;
				text-align: center;
				line-height: 55rpx;
				margin-right: 22rpx;
				background: #FAF0E1;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #D5A969;
			}
		}
	}

	.menuRow {
		display: flex;
		flex-wrap: wrap;
		padding: 0 !important;
		margin: 25rpx 30rpx 20rpx;
		width: calc(100% - 60rpx);
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.tagMenu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			width: calc(100% - 40rpx);
			padding: 0 20rpx;
			border-bottom: 1rpx solid #F0F0F0;

			&:last-child {
				border-bottom: none;
			}

			text {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 50%;

			}

			image {
				width: 14rpx;
				height: 25rpx;
			}
		}

		.wight {
			width: calc(100% - 200rpx);
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.info {
				margin-right: 16rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 90%;
			}

			.infos {
				font-weight: 400;
				font-size: 30rpx;
				color: #999999;
				margin-right: 16rpx;
			}
		}
	}


	.tagMenu1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		width: calc(100% - 100rpx);
		padding: 0 20rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		text {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 50%;

		}

		image {
			width: 14rpx;
			height: 25rpx;
		}

		.wight {
			width: calc(100% - 200rpx);
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.info {
				margin-right: 16rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 90%;
				/* 设置文本渐变背景 */
				background: linear-gradient(90deg, #05E9B8 0%, #BE6BCD 100%);
				/* 让背景渐变只应用于文本 */
				background-clip: text;
				/* 为了在旧版本的浏览器中看到效果，可以设置一个实色背景 */
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	}

	.tagMenuDesign {
		width: calc(100% - 100rpx);
		padding: 0 20rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.designBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		text {
			height: 100rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 100rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 50%;

		}

		image {
			width: 14rpx;
			height: 25rpx;
		}

		.wight {
			width: calc(100% - 200rpx);
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.info {
				margin-right: 16rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 90%;
				/* 设置文本渐变背景 */
				background: linear-gradient(90deg, #05E9B8 0%, #BE6BCD 100%);
				/* 让背景渐变只应用于文本 */
				background-clip: text;
				/* 为了在旧版本的浏览器中看到效果，可以设置一个实色背景 */
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	}

	.box {
		width: calc(100% - 0rpx);
		margin: 0 auto;
		background: #F7F7F7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.tagMenuDesigns {
		padding-bottom: 30rpx;
	}

	.note {
		width: calc(100% - 100rpx);
		padding: 25rpx 20rpx 30rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		text {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 50%;
		}

		.textareaStyle {
			margin-top: 14rpx;
			height: 340rpx;
		}

		::v-deep .u-textarea {
			background: #F7F7F7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #EEEEEE;
			height: 300rpx;
		}
	}

	.send {
		width: calc(100% - 60rpx);
		margin: 50rpx auto;
		height: 88rpx;
		background: linear-gradient(115deg, #F2BD6F 0%, #CCA05F 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
</style>